import { createBrowserRouter } from 'react-router-dom'
import App from '../App'
import Home from '../pages/home/Index'
import NotFound from '../components/NotFound'
import np from 'nprogress'
import 'nprogress/nprogress.css'


const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <App />,
      children: [

        { index: true, element: <Home /> },
        {
          path: 'home',
          lazy: async () => {
            const { default: Home } = await import('../pages/home/Index')
            return {
              element: <Home />
            }
          }
        },
        {
          path: 'me',
          lazy: async () => {
            const { default: Me } = await import('../pages/me/Index')
            return {
              element: <Me />
            }
          }
        }
      ]
    },
    {
      path: '/login',
      lazy: async () => {
        const { default: Login } = await import('../pages/login/Index')
        return {
          element: <Login />
        }
      }
    },
    {
      path: '/reg',
      lazy: async () => {
        const { default: Reg } = await import('../pages/reg/Index')
        return {
          element: <Reg />
        }
      }
    },
    {
      path: '/city',
      async lazy() {
        const { default: CityList, loader } = await import(
          '../pages/city/Index'
        )
        return {
          element: <CityList />,
          loader
        }
      }
    },
     {
      path: '/list',
      async lazy() {
        const { default: List, loader } = await import(
          '../pages/list/index'
        )
        return {
          element: <List />,
          loader
        }
      }
    },
    {
      path: '/deail/:id',
      async lazy() {
        const { default: Deail, loader } = await import(
          '../pages/list/deail'
        )
        return {
          element: <Deail />,
          loader
        }
      }
    },
    { path: '*', element: <NotFound /> }
  ],
  {
    future: {
      v7_relativeSplatPath: true
    }
  }
)


router.subscribe((state) => {

  if (state.navigation.state === 'loading') {
    np.start()
  } else if (state.navigation.state === 'idle') {
    np.done()
  }
})

export default router
